<template>
  <div class="tree-box-warp">
    <div>
      <el-input
        v-model="filterKeyText"
        class="w-50 m-2"
        placeholder="请输入关键字"
        prefix-icon="el-icon-search"
      />
    </div>
    <div style="margin-top: 10px">
      <el-select v-model="facility" placeholder="请选择设备类型" size="mini">
        <el-option
          v-for="item in facilityData"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </div>
    <div style="margin-top: 10px">
      <el-tree
        ref="reftreedata"
        :data="treeData"
        node-key="id"
        :current-node-key="treeId"
        highlight-current
        default-expand-all
        :filter-node-method="filterNode"
        :props="defaultProps"
      ></el-tree>
    </div>
  </div>
</template>
<script>
export default {
  name: 'overviewTree',
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      filterKeyText: '',
      treeId: null,
      facility: null,
      facilityData: [
        {
          id: 1,
          name: '设备1',
        },
        {
          id: 2,
          name: '设备2',
        },
        {
          id: 3,
          name: '设备3',
        },
        {
          id: 4,
          name: '设备4',
        },
      ],
      treeData: [
        {
          label: '一级 1',
          children: [
            {
              label: '二级 1-1',
              children: [
                {
                  label: '三级 1-1-1',
                },
              ],
            },
          ],
        },
        {
          label: '一级 2',
          children: [
            {
              label: '二级 2-1',
              children: [
                {
                  label: '三级 2-1-1',
                },
              ],
            },
            {
              label: '二级 2-2',
              children: [
                {
                  label: '三级 2-2-1',
                },
              ],
            },
          ],
        },
        {
          label: '一级 3',
          children: [
            {
              label: '二级 3-1',
              children: [
                {
                  label: '三级 3-1-1',
                },
              ],
            },
            {
              label: '二级 3-2',
              children: [
                {
                  label: '三级 3-2-1',
                },
              ],
            },
          ],
        },
      ],
    }
  },
  watch: {
    filterKeyText(val) {
      this.$refs.reftreedata.filter(val)
    },
  },
  created() {},
  mounted() {},
  methods: {
    filterNode(value, data, _node) {
      if (!value) return true
      return data.label.includes(value)
    },
  },
}
</script>
<style lang="scss" scoped>
.tree-box-warp {
  padding: 10px;
  // border: 1px solid #ccc;
  // height: 100%;
  // height: calc(100vh);
}
</style>
